正文：
在程式語言當中，迴圈與判斷式雖然基本，但實用性可以說是非常高，所以呢，在 vue 中，可以直接在 html 內透過 v-for v-if 來渲染元素，是不是很實用呢，就讓我們來看一下怎麼使用吧

<div v-for="(item,index) in list" :key="index">
    <span>{{item}}</span>
</div>

vue 實例
data:{
    list: [1,2,3,4,5]
}

上面的 v-for 代碼意思為將 list 內的值一一取出，命名為 item，並且取出索引，命名為 index，而之後的 :key 是讓每一個迴圈產出的元素為唯一值，這邊使用不會重複的陣列索引值
而後產出的畫面會長得像是

1
2
3
4
5

那這邊我們再額外加上 v-if 此指令，若 v-if 內的值為 true 就將元素渲染，false則不渲染

<div v-for="(item,index) in list" :key="index">
    <span v-if="item!=3">{{item}}</span>
</div>

vue 實例
data:{
    list: [1,2,3,4,5]
}

產出畫面為

1
2
4
5

接下來我們再將 v-else-if 和 v-else 加上去一起使用

<div v-for="(item,index) in list" :key="index">
    <span v-if="item==3">{{item}}</span>
    <span v-else-if="item%2==0">{{item*10}}</span>
    <span v-else>{{item*(-1)}}</span>
</div>

vue 實例
data:{
    list: [1,2,3,4,5]
}

產出畫面為：

-1
20
3
40
-5

這邊需要注意的是 v-if v-else-if v-else 必須為相鄰關係，不然無法正常運作。

嘮叨一下：
今天這章水分十足，真是太不好意思了，明天盡量補回來